<template>
	<div class="Favo">
		<p
			style="display: block;width: 100%;line-height: 2;margin-bottom: 40px;padding-left: 20px;border-bottom: 1px solid #eee;">
			<span style="display: block;width: 120px;font-size: 20px;border-bottom: 3px solid #59309f;">UP主收藏</span>
		</p>

		<div class="con" style="display: flex;flex-direction: column;">
			<div style="display: flex;justify-content: end;margin-right: 20px;">
				<el-button type="success" style="background-color: #f2f5fc;color: #59309f;border: 1px solid #59309f;">
					分组管理</el-button>
				<el-button type="success" style="background-color: #59309f;color: #f2f5fc;border: none;" @click="getAddGroup">+
					新建分组
				</el-button>
			</div>
			<div>
				<span
					style="width: 100px;display: inline-block;height: 40px;line-height: 40px;padding-left: 20px;">收藏分组</span>
				<span
					style="width: 70px;background-color: #59309f;color: #fff;display: inline-block;height: 30px;line-height: 30px;text-align: center;">全部(0)</span>
			</div>
			<div style="margin-bottom: 40px;">
				<span
					style="width: 100px;display: inline-block;height: 40px;line-height: 40px;padding-left: 20px;">星标</span>
				<span
					style="width: 70px;background-color: #59309f;color: #fff;display: inline-block;height: 30px;line-height: 30px;text-align: center;margin-right: 10px;">全部</span>
				<span
					style="width: 70px;color: #000;display: inline-block;height: 30px;line-height: 30px;text-align: center;margin-right: 10px;">以标识</span>
				<span
					style="width: 70px;color: #000;display: inline-block;height: 30px;line-height: 30px;text-align: center;">未标识</span>
			</div>

			<div>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick" fill="#59309f">
					<el-tab-pane label="最近添加" name="first"></el-tab-pane>
					<el-tab-pane label="最早添加" name="second"></el-tab-pane>
					<el-tab-pane label="粉丝量最多" name="third"></el-tab-pane>
					<el-tab-pane label="视频数最多" name="fourth"></el-tab-pane>
				</el-tabs>
			</div>
			<div>
				<table class="table" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th colspan="4">UP主信息</th>
						<th>备注</th>
						<th>粉丝数</th>
						<th>实视频数</th>
						<th>总充电人数</th>
						<th>播放数</th>
						<th>获赞数</th>
						<th>操作</th>
					</tr>
					<!-- <div v-for="(item,index) in FavoList.ItemList" :key="index"> -->
					<tr v-for="(item,index) in FavoList.ItemList" :key="index"
						style="height: 120px;padding: 10px 0;background-color: #fff;">
						<td colspan="4" style="text-align: start;">
							<img :src="item.AvatarUrl" style="float: left;padding-right: 10px;">
							<p class="td-list-p1" style="margin-left: 20px;vertical-align:middle">
								<span style="font-weight: 700;font-size:20px;">{{item.NickName}}</span>
								<span v-if="item.LevelNumber"
									style="border: 1px solid #ff435a;color:#ff435a;">lv{{item.LevelNumber}}</span>
								<span v-if="item.Vip"
									style="border: 1px solid #5eb1ff;color:#5eb1ff;">{{item.Vip}}</span>
								<span style="border: 1px solid #fb89a8;color:#fb89a8;">粉</span>
								<span v-if="item.ChildTag.length"
									style="border: 1px solid #9271ff;color:#9271ff;">{{item.ChildTag[0]}}</span>
								<span v-if="item.Fans>item.FansAdd"
									style="background: #3d85ff;color:#fff;padding: 4px 8px;border-radius: 20px;">男粉多</span>
								<span v-if="item.Fans<item.FansAdd"
									style="background: #fb89a8;color:#fff;padding: 4px 8px;border-radius: 20px;">女粉多</span>
							</p>
							<p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width: 462px;">
								<span>UID:{{item.MId}}</span>
								<span style="padding: 0 10px;">{{item.BloggerPropsName}}</span>
								<span>{{item.OfficialTitle}}</span>
							</p>
							<p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width: 462px;">
								<span style="padding-right: 10px;">个性签名:</span>
								<span>{{item.Sign}}</span>

							</p>
							<p class="td-list-p2">
								<span style="border: 1px solid #cbd1dd;color: #cbd1dd;padding-right: 6px;"
									v-for="ind in item.ChildTag" :key="ind">{{ind}}</span>
							</p>
						</td>
						<td>Data</td>
						<td>{{item.Fans | moneyFormat}}</td>
						<td>{{item.ArchiveCount | moneyFormat}}</td>
						<td>{{item.ChargeTotal}}</td>
						<td>{{item.PlayCount | moneyFormat}}</td>
						<td>{{item.LikeCount | moneyFormat}}</td>
						<td>
							<p style="color: #3a57c8;">修改分组</p>
							<p style="color: #3a57c8;">取消收藏</p>
						</td>
					</tr>
					<!-- <div v-else style="width: 280%;display: flex;justify-content: center;">
							<img src="../assets/kzf_tu4.png">
						</div> -->
					<!-- </div> -->
				</table>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		GetBloggerList,
		AddGroup
	} from '@/api/intelbras.js'
	export default {
		data() {
			return {
				activeName: 'first',
				list: [],
				FavoList: []
			};
		},
		created() {
			this.getBloggerList()
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			open() {
				this.$prompt('分组名称', '新建分组', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						color: '#59309f'
					})
					.then(({
						value
					}) => {
						// getAddGroup(value)
						console.log(value,"123");
					})
					// .catch(() => {
					// 	this.$message({
					// 		type: 'info',
					// 		message: '取消输入'
					// 	})
					// })
			},
			getBloggerList() {
				GetBloggerList()
					.then(res => {
						this.FavoList = res.data.Data
						// console.log(this.FavoList);
					})
					.catch(err => console.log(err))
			},
			getAddGroup(e) {
				AddGroup({
						name: e
					})
					.then(res => {
						this.Group = res
						console.log(this.Group, '123');
					})
					.catch(err => console.log(err))
			},
		},
		filters: {
			//取截单元,单位
			moneyFormat: function(arg) {
				if (arg.toString().length >= 13) {
					// return arg/1000000000000+"万亿"
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 2) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				}

			}
		}
	};
</script>

<style>
	.Favo {
		background-color: #ffffff;
	}

	.Favo .el-tabs__item:hover {
		color: #59309f;
	}

	.Favo .el-tabs--card>.el-tabs__header {
		border: none;
	}

	.Favo .el-tabs__nav-scroll {
		border-bottom: none;
		margin-left: 20px;
	}

	.Favo .el-tabs--card>.el-tabs__header .el-tabs__item {
		border-bottom: 1px solid #f0f0f0 !important;
	}

	.Favo .el-tabs__item.is-active {
		color: #fff;
		background-color: #59309f;
	}


	.Favo {
		background-color: #fff;
	}

	.Favo .table {
		width: 100%;
		min-width: 1250px;
		padding: 20px;
	}

	.Favo td {
		border-bottom: 1px solid #eee;
		line-height: 1.6;
	}

	.Favo .table:first-child tr {
		background-color: #f7f8fa;
		height: 40px;
		font-weight: 400;
	}

	.Favo .table:first-child tr th {
		font-weight: 400;
	}

	.Favo .table:first-child tr th:first-child {
		padding-left: 20px;
		text-align: start;
	}

	.Favo .table:first-child tr td:not(:first-child) {
		text-align: center;
	}

	.Favo .table:first-child tr th:not(:first-child) {
		width: 120px;
	}

	.Favo .td-list-p1 span:not(:first-child) {
		margin: 0 4px;
	}

	.Favo .td-list-p2 span {
		margin: 0 4px;
		padding: 2px 6px;
	}
</style>
